<template>
  <div class="container">
    <div class="index">
      <el-row :gutter="10">
        <el-col :span="12">
          <data-panel title="基地概况">
            <div class="main flex fdc " ref="myDiv">
              <el-row :gutter="10" class="flex1">
                <el-col :span="8" class="h100 flex aic"
                >
                  <data-box
                    icon="el-icon-s-data"
                    backgroundColor="#5470c6"
                    text="基地面积(亩)"
                    :value="baseInfo.areaCount"
                    class="flex1"
                  ></data-box
                  >
                </el-col>
                <el-col :span="8" class="h100 flex aic"
                >
                  <data-box
                    icon="el-icon-s-finance"
                    backgroundColor="#91cc75"
                    text="种养种类(种)"
                    :value="baseInfo.germplasmCount"
                    class="flex1"
                  ></data-box
                  >
                </el-col>
                <el-col :span="8" class="h100 flex aic"
                >
                  <data-box
                    icon="el-icon-s-grid"
                    backgroundColor="#fac858"
                    text="地块数量(块)"
                    :value="baseInfo.diCount"
                    class="flex1"
                  ></data-box
                  >
                </el-col>
              </el-row>
              <el-row :gutter="10" class="margin-top-10 flex1">
                <el-col :span="8" class="h100 flex aic"
                >
                  <data-box
                    icon="el-icon-s-custom"
                    backgroundColor="#ee6666"
                    text="人员总数(位)"
                    :value="baseInfo.employeeCount"
                    class="flex1"
                  ></data-box
                  >
                </el-col>
                <el-col :span="8" class="h100 flex aic"
                >
                  <data-box
                    icon="el-icon-s-claim"
                    backgroundColor="#73c0de"
                    text="种植批次(批)"
                    :value="baseInfo.batchCount"
                    class="flex1"
                  ></data-box
                  >
                </el-col>
                <el-col :span="8" class="h100 flex aic"
                >
                  <data-box
                    icon="el-icon-s-shop"
                    backgroundColor="#3ba272"
                    text="大棚数量(个)"
                    :value="baseInfo.pengCount"
                    class="flex1"
                  ></data-box
                  >
                </el-col>
              </el-row>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="12">
          <data-panel title="农业空气指标">
            <div class="main">
            <el-row :gutter="5" style="overflow: hidden">
                <el-col :span="8">
                  <el-col :span="24">
                    <el-dropdown trigger="click" ref="cityDropdown">
                     <span class="el-dropdown-link" style="font-size: 20px">{{ this.chooseCity.label }}<i class="el-icon-arrow-down el-icon--right"></i></span>
                      <el-dropdown-menu slot="dropdown">
                        <el-tree :data="cits" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree>
                      </el-dropdown-menu>
                    </el-dropdown>
                    <div style="float: right;font-size: 20px" >{{this.weatherData.obsTime}}</div>
                  </el-col>
                  <el-col :span="24"><div style="text-align: center;font-size: 60px">{{this.weatherData.temp}}°<span style="font-size: 25px">{{this.weatherData.text}}</span></div></el-col>
                  <el-col style="text-align: center;font-size: 12px" >
                    <el-col :span="6"><div class="weather-waterDroplet w-icon"></div><div>降水</div><div>{{this.weatherData.precip}}mm</div></el-col>
                    <el-col :span="6"><div class="weather-soamFanIcon w-icon"></div><div>{{this.weatherData.windDir}}</div><div>{{this.weatherData.windScale}}级</div></el-col>
                    <el-col :span="6"><div class="weather-waterDroplet w-icon"></div><div>湿度</div><div>{{this.weatherData.humidity}}%</div></el-col>
                    <el-col :span="6"><div class="weather-atmosphericPpressure w-icon"></div><div>气压</div><div>{{this.weatherData.pressure}}hpa</div></el-col>
                  </el-col>
                </el-col>
                <el-col :span="8" >
                  <el-col :span="24" style="height: 100%;text-align: center;font-size: 12px">
                    <el-col v-for="(day, index) in weatherForDay" :key="index" :span="8">
                      <div>{{ label[index] }}</div>
                      <div class="w-svg" :style="weatherIcon[index]"></div>
                      <div class="w-svg" :style="weatherIcon[index+3]"></div>
                      <div>{{ day.tempMax }}°/{{ day.tempMin }}°</div>
                      <div>{{ day.textDay }}~{{ day.textNight }}</div>
                    </el-col>
                  </el-col>
                </el-col>
              <el-col :span="8">
                 <StackedLineChart :chartId="'id3'" :chart-width="'100%'" :chart-height="'230%'" :data-map="this.weather"/>
              </el-col>
            </el-row>
            </div>
          </data-panel>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="margin-top-10">
        <el-col :span="8">
          <data-panel title="本周病虫害监测数据">
            <div class="main">
              <div ref="pieChart" style="width:100%; height: 100%;"></div>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="虫情统计">
          <div class="main" >
            <BarChart chart-id="id1" :data="this.insectSData"/>
          </div>
         </data-panel>
          </el-col>
        <el-col :span="8">
          <data-panel title="用水统计">
            <div class="main" >
              <BarChart chart-id="id2" :data="this.water"/>
            </div>
          </data-panel>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="margin-top-10">
        <el-col :span="8">
          <data-panel title="水质检测" more="详情" link="/agriculturalMonitoring/water">
            <div class="main">
            <StackedLineChart :chartId="'id1'" :chart-width="'100%'" :chart-height="'100%'" :data-map="this.waterQualityData.rows"/>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="土壤墒情" more="详情" link="/agriculturalMonitoring/moisture">
            <div class="main" >
              <StackedLineChart :chartId="'id2'" :chart-width="'100%'" :chart-height="'100%'" :data-map="this.soilData"/>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="用电统计">
            <div class="main" >
              <BarChart chart-id="id3" :data="this.electricity"/>
            </div>
          </data-panel>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="8">
          <data-panel title="农事统计" more="更多农事" link="/agriculture/task">
            <div class="main">
              <el-row class="h100" :gutter="10">
                <el-col :md="10" class="h100">
                  <div ref="indexServiceMonitorChart" class="h100"></div>
                </el-col>
                <el-col :md="7" class="h100 flex fdc jcsa">
                  <data-box
                    v-for="item in taskInfo.slice(0,2)" :key="item.name"
                    icon="el-icon-s-promotion"
                    backgroundColor="red"
                    :text="item.name+'(条)'"
                    :value="item.value"
                    :isBorder="false"
                    :isIcon="false"
                  ></data-box>
                </el-col>
                <el-col :md="7" class="h100 flex fdc jcsa">
                  <data-box
                    v-for="item in taskInfo.slice(2,4)" :key="item.name"
                    icon="el-icon-s-promotion"
                    backgroundColor="red"
                    :text="item.name+'(条)'"
                    :value="item.value"
                    :isBorder="false"
                    :isIcon="false"
                  ></data-box>
                </el-col>
              </el-row>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="设备统计" more="更多设备" link="/iot/device">
            <div class="main">
              <el-row class="h100" :gutter="10">
                <el-col :md="10" class="h100"
                >
                  <div ref="indexDeviceCountChart" class="h100"></div
                  >
                </el-col>
                <el-col :md="7" class="h100 flex fdc jcsa">
                  <data-box v-for="item in deviceCountList.slice(0,2) " :key="item.productId"
                            icon="el-icon-s-promotion"
                            backgroundColor="red"
                            :text="item.name+'(台)'"
                            :value="item.value"
                            :isBorder="false"
                            :isIcon="false"
                  ></data-box>
                </el-col>
                <el-col :md="7" class="h100 flex fdc jcsa">
                  <data-box v-for="item in deviceCountList.slice(2,4) " :key="item.productId"
                            icon="el-icon-s-promotion"
                            backgroundColor="red"
                            :text="item.name+'(台)'"
                            :value="item.value"
                            :isBorder="false"
                            :isIcon="false"
                  ></data-box>
                </el-col>
              </el-row>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="设备定时任务">
            <div class="main">
              <el-row class="h100" :gutter="10">
                <el-col :md="10" class="h100"
                >
                  <div ref="indexDeviceControlChart" class="h100"></div
                  >
                </el-col>
                <el-col :md="7" class="h100 flex fdc jcsa">
                  <data-box v-for="item in deviceJobCountList" :key="item.status"
                            icon="el-icon-s-promotion"
                            backgroundColor="red"
                            :text="item.status === 1 ? '暂停(条)' : '启用(条)'"
                            :value="item.jobCount"
                            :isBorder="false"
                            :isIcon="false"
                  ></data-box>
                </el-col>
                <el-col :md="7" class="h100 flex fdc jcsa">
                  <data-box v-for="item in deviceJobCountList" :key="item.status"
                            icon="el-icon-s-promotion"
                            backgroundColor="red"
                            :text="item.status === 0 ? '执行成功(次)' : '执行失败(次)'"
                            :value="item.resultCount"
                            :isBorder="false"
                            :isIcon="false"
                  ></data-box>
                </el-col>
              </el-row>
            </div>
          </data-panel>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="24">
          <data-panel title="地图管理" more="地图管理" link="/agriculture/map">
           <el-row>
             <el-col :span="16">
               <div class="mapMain">
                 <div id="indexMap" class="h100">
                   <el-dropdown @command="handleCommand"  size="mini" trigger="click"  split-button type="" style="position: absolute; top: 10px; right: 10px;z-index: 1000;">
                     切换基地
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item v-for="item  in baseList"  :command="item">{{item.baseName}}</el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </div>
               </div>
             </el-col>
             <el-col :span="8">
               <el-col :span="24">
                 <span>设备1</span>
                 <div class="monitorMain">
                   <VideoPlayer :videoId="'video1'" controllable automatic />
                 </div>
               </el-col>
               <el-col :span="24">
                 <span>设备2</span>
                 <div class="monitorMain">
                   <VideoPlayer :videoId="'video2'" controllable automatic />
                 </div>
               </el-col>
             </el-col>
           </el-row>
          </data-panel>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px">
        <div class="copyRight">©广西盛源行电子信息股份有限公司</div>
      </el-row>
    </div>
  </div>
</template>
<script>
import {
  selectBaseInfo,
  selectDeviceInfo,
  selectDeviceJobInfo,
  selectTraceInfo,
  selectTaskInfo
} from "@/api/agriculture/dataStatistics"
import DataPanel from "./components/DataPanel";
import DataBox from "./components/DataBox";
import { pieChart } from "./components/DataChart";
import { listLand } from "@/api/agriculture/land";
import { listDevice } from "@/api/iot/device";
import * as echarts from 'echarts';
import { getWeather } from "@/api/weather/weather";
import citis from "@/utils/weatherCitys/citis.js"
import BarChart from "../components/BarChart";
import WeatherStation from "./iot/device/components/WeatherStation/index.vue";
import StackedLineChart from "../components/StackedLineChart/index.vue";
import { getWaterQuality } from "../api/agriculture/water";
import { getWeatherQuality } from "../api/agriculture/weather";
import axios from 'axios';
import VideoPlayer from '@/components/VideoPlayer';
import {listBaseinfo} from "@/api/agriculture/baseinfo";
export default {
  name: "",
  components: {
    VideoPlayer,
    WeatherStation,
    DataPanel,
    DataBox,
    BarChart,
    StackedLineChart
  },
  data() {
    return {
      dataConversion:[],
      chooseCity:{
        label:'南宁',
        value:'101300101'
      },
      cits:citis,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      weatherData:[],
      weatherForDay:[],
      label: ['今天', '明天', '后天'],
      weatherIconMapping:{
        '晴': 'sunny.svg',
        '多云': 'cloudy.svg',
        '阴': 'cloudyDay.svg',
        '小雨': 'lightRain.svg',
        '中雨': 'moderateRain.svg',
        '大雨': 'heavyRain.svg',
        '阵雨':'shower.svg'
      },
      // 水质折线
      waterQualityData:[],
      // 土壤折线
      soilData:[],
      // 天气折线
      weather:[],
      // 水统计
      water:[
        {
          '上个月':30,
          '上周':5,
          '本周累计':3
        }
      ],
      // 电
      electricity:[
        {
          '上个月':200,
          '上周':30,
          '本周累计':16
        }
      ],
      // 水质查询参数
      params: {
        page:1,
        pageSize:100,
        deviceId:21075888,
        startTime:null,
        endTime:null,
      },
      baseCoor:[],
      // 气象查询参数
      weatherParam:{
        id:101300806,
        page:1,
        pageSize:100,
      },
      weatherIcon:[],
      // 虫情
      insectSData: [
        {
          label: '近3天',
          pests: {
            '隐翅虫': 32,
            '划蝽': 28,
            '蚊子': 27,
            '斜纹夜蛾': 10,
            '纹歧角螟': 7
          }
        },
        {
          label: '本周',
          pests: {
            '隐翅虫': 46,
            '划蝽': 37,
            '蚊子': 31,
            '斜纹夜蛾': 10,
            '稻飞虱': 7
          }
        },
        {
          label: '本月',
          pests: {
            '隐翅虫': 155,
            '蚊子': 144,
            '划蝽': 116,
            '瓢虫': 32,
            '水龟虫': 22
          }
        },
      ],
      landList: [],
      deviceList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      baseInfo: {
        areaCount: 0,
        germplasmCount: 0,
        diCount: 0,
        employeeCount: 0,
        batchCount: 0,
        pengCount: 0
      },
      deviceCountList: [],
      deviceTotal: 0,
      deviceJobCountList: [],
      traceInfo: {
        date: [],
        num: []
      },
      taskInfo: [],
      // 天地图
      tianditu: {
        labelList: [],
        center: [109.467, 22.912],
        zoom: 16,
        polygon: []
      },
      baseList:'',
      map: null
    };
  },
  async mounted() {
    this.getMoisture();
    await this.fetchWeather();
    await this.fetchWaterData();
    await this.fetchWeatherData();
    await this.renderPieChart();
    await this.getLandList();
    await this.getDate();
    await this.getBaseList();
    pieChart(this.$refs.indexDeviceCountChart, '设备数量', '设备总数(个)', this.deviceCountList, this.deviceTotal);
    pieChart(this.$refs.indexDeviceControlChart, '定时任务', '总任务数(条)', this.$deviceJob, this.$jobTotal);
    pieChart(this.$refs.indexServiceMonitorChart, '农事任务', '任务进度(%)', this.taskInfo, this.$taskTotal);
    await this.getDeviceList();
    await this.getVideo();
    setInterval(() => {this.getVideo()}, 60000)
  },
  methods: {
    async handleCommand(row){
      this.baseCoor=row.baseCoordinate.split(',')
      await this.initMap();
    },
    // 获取基地列表
    async getBaseList(){
        const row = await listBaseinfo()
        this.baseList = row.rows
        console.log(this.baseList)
        this.baseCoor=this.baseList[0].baseCoordinate.split(',')
        await this.initMap();
    },

    // 下拉菜单
    handleNodeClick(node) {
      if (node.childNodes && node.childNodes.length > 0) {
              this.chooseCity.value=node.value
              this.chooseCity.label=node.label
      } else {
              this.chooseCity.value=node.value
              this.chooseCity.label=node.label
      }
      this.$nextTick(() => {
        this.$refs.cityDropdown.hide();
      });
      this.fetchWeatherData()
    },
    // 获取水质数据
    async  fetchWaterData(){
      const response  =  await  getWaterQuality(this.params)
      this.waterQualityData = response;
    },
    // 获取数据库气象数据
    async  fetchWeather(){
      const response  =  await  getWeatherQuality(this.weatherParam)
      this.weather = response.rows;
    },
    // 获取天气数据
    async fetchWeatherData() {
      const response1 = await getWeather(this.chooseCity.value, 'now');
      this.weatherData= response1.data.now;
      const date = new Date(this.weatherData.obsTime);
      const hours = date.getHours();
      const minutes = date.getMinutes();
      this.weatherData.obsTime = `${hours}:${String(minutes).padStart(2, '0')}`;
      const response2 = await getWeather(this.chooseCity.value, '3d');
      this.weatherForDay=response2.data.daily;
      this.fetchWeatherIcon()
    } ,
    // 动态天气图标
    fetchWeatherIcon() {
      this.weatherIcon = Array(6);
      for (let i = 0; i < 3; i++) {
        const iconPath = this.weatherIconMapping[this.weatherForDay[i].textDay];
        this.weatherIcon[i]= `backgroundImage: url(${require(`@/assets/weather/${iconPath}`)})`;
      }
      for (let i = 0; i < 3; i++) {
        const iconPath = this.weatherIconMapping[this.weatherForDay[i].textNight];
        this.weatherIcon[i + 3] = `backgroundImage: url(${require(`@/assets/weather/${iconPath}`)})`;
      }
    },
    /** 初始化map */
    async initMap() {
      this.map = new T.Map("indexMap",);
      this.map.centerAndZoom(new T.LngLat(this.baseCoor[0], this.baseCoor[1]), this.tianditu.zoom);
      this.map.addControl(new T.Control.Zoom);
      this.map.setMapType(window.TMAP_HYBRID_MAP);
      // 展示数据库的地块
      this.landList.forEach(item => {
        let {landPath, fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWeight, landName} = item;
        let path = landPath && landPath.split('|').map(item => item.split(','))
        let TPath = [];
        path.forEach(item => {
          TPath.push(new T.LngLat(parseFloat(item[0]).toFixed(6), parseFloat(item[1]).toFixed(6)))
        })
        let polygon = new T.Polygon(TPath, {
          color: strokeColor,
          weight: strokeWeight,
          opacity: strokeOpacity,
          fillColor: fillColor,
          fillOpacity: fillOpacity,
          lineStyle: "solid"
        })
        this.map.addOverLay(polygon)
        // 添加文字
        let tLabel = new T.Label({
          text: landName,
          position: this.getAreaCenter(path),
          offset: new T.Point(-44, 0)
        })
        tLabel.setBorderLine(0)
        tLabel.setFontColor('white')
        tLabel.setBackgroundColor()
        this.$data.tianditu.labelList.push(tLabel)
        this.map.addOverLay(tLabel)
      })
      this.map.addEventListener('zoomend', this.hideControl)
    },
    // 监听地图缩放事件方法，并隐藏显示文字
    hideControl(e) {
      if (this.map.getZoom() <= 15) {
        this.$data.tianditu.labelList.forEach(item => {
          this.map.removeOverLay(item)
        })
      } else {
        this.$data.tianditu.labelList.forEach(item => {
          this.map.addOverLay(item)
        })
      }
    },
    async getLandList() {
      const {rows} = await listLand();
      this.landList = rows;
    },
    async getDeviceList() {
      const {rows} = await listDevice();
      this.deviceList = rows;
    },
    getAreaCenter(points) {
      var total = points.length;
      var X = 0,
        Y = 0,
        Z = 0;
      points.forEach(lnglat => {
        var lng = (lnglat [0] * Math.PI) / 180;
        var lat = (lnglat [1] * Math.PI) / 180;
        var x, y, z;
        x = Math.cos(lat) * Math.cos(lng);
        y = Math.cos(lat) * Math.sin(lng);
        z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      });
      X = X / total;
      Y = Y / total;
      Z = Z / total;

      var Lng = Math.atan2(Y, X);
      var Hyp = Math.sqrt(X * X + Y * Y);
      var Lat = Math.atan2(Z, Hyp);
      return new T.LngLat(parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI))
    },
    /** 获取首页统计数据 */
    async getDate() {
      const res = await selectBaseInfo()
      this.baseInfo = res.rows[0]
      const res2 = await selectDeviceInfo()
      this.deviceCountList = res2.rows.slice(0, 4).map(item => ({name: item.productName, value: item.deviceCount}));
      this.deviceTotal = res2.rows[4].deviceCount;
      const res3 = await selectDeviceJobInfo()
      this.deviceJobCountList = res3.rows;
      this.$jobTotal = 0;
      this.$deviceJob = this.deviceJobCountList.map(item => {
        this.$jobTotal += item.jobCount;
        if (item.status == 0) {
          return {name: '未启用', value: item.jobCount}
        } else {
          return {name: '启用', value: item.jobCount}
        }
      })

      const res4 = await selectTraceInfo()
      res4.rows.forEach(item => {
        this.traceInfo.date.push(item.date);
        this.traceInfo.num.push(item.num);
      });

      const res5 = await selectTaskInfo()
      //未分配
      let wfp = res5.rows.find(item => item.status == 0) ? res5.rows.find(item => item.status == 0).num : 0;
      //已分配
      let yfp = res5.rows.find(item => item.status == 1) ? res5.rows.find(item => item.status == 1).num : 0;
      //进行中
      let jxz = res5.rows.find(item => item.status == 2) ? res5.rows.find(item => item.status == 2).num : 0;
      //已完成
      let ywc = res5.rows.find(item => item.status == 3) ? res5.rows.find(item => item.status == 3).num : 0;
      //任务进度
      this.$taskTotal = (wfp + yfp + ywc + jxz) == 0 ? 0 : (ywc * 100 / (wfp + yfp + ywc + jxz)).toFixed(2);
      this.taskInfo = [{
        name: '未分配',
        value: wfp
      }, {
        name: '已分配',
        value: yfp
      }, {
        name: '进行中',
        value: jxz
      }, {
        name: '已完成',
        value: ywc
      }]

    },
    renderPieChart() {
      const chart = echarts.init(this.$refs.pieChart);
      const option = {
        title: {
          text: '病虫害数:155',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 4.7,
                name: '紫条尺娥:0.47%'
              },
              {
                value: 23.6,
                name: '蚂蚁:2.36%'
              },
              {
                value: 179.2,
                name: '蚊子:17.92%'
              },
              {
                value: 42.5,
                name: '瓢虫:4.25%'
              },
              {
                value: 292.5,
                name: '隐翅虫:29.25%'
              },
              {
                value: 240.6,
                name: '划蝽:24.06%'
              },
              {
                value: 23.6,
                name: '褐带卷叶蛾:2.36%'
              },
              {
                value: 33,
                name: '稻飞虱:3.3%'
              },
              {
                value: 4.7,
                name: '飞蛾:0.47%'
              },
              {
                value: 80.2,
                name: '斜纹夜蛾:8.02%%'
              },
              {
                value: 4.7,
                name: '线委夜蛾:0.47%'
              }
            ],
            radius: ['50%', '80%']
          }
        ]
      };
      chart.setOption(option);
    },
    // 生成随机数
    getFloor(minData, maxData) {
      const min = minData;
      const max = maxData;
      const data = Math.floor(Math.random() * (max - min) + min);
      return data
    },
    // 获取土壤数据
    getMoisture() {
      const currentDate = new Date('2023-12-20');
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1;
      const day = currentDate.getDate();
      const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
      const lineNewData=[];
      let j = 0, k = 0;
      for (let i = 0; i < 1441; i += 10, k += 10) {
        if (k === 60) {k = 0;j = j + 1;}
        if (j === 24) {j = 0;}
        let newData = {value: '', valueText: '', valueEC: '', time: '',};
        const numbers = [175, 176, 177, 178, 179, 180];
        const randomIndex = Math.floor(Math.random() * numbers.length);
        let second = this.getFloor(0, 61);
        if (-1 < j && j < 7) {
          newData.value = this.getFloor(8, 11);
          newData.valueText = this.getFloor(42, 44);
          newData.valueEC = numbers[randomIndex];
        } else if (6 < j && j < 9) {
          newData.value = this.getFloor(8, 11);
          newData.valueText = this.getFloor(42, 44);
          newData.valueEC = numbers[randomIndex];
        } else if (8 < j && j < 19) {
          newData.value = this.getFloor(8, 12);
          newData.valueText = this.getFloor(43, 44);
          newData.valueEC = numbers[randomIndex];
        } else if (18 < j && j < 24) {
          newData.value = this.getFloor(9, 11);
          newData.valueText = this.getFloor(42, 42);
          newData.valueEC = numbers[randomIndex];
        }
        newData.time = `${formattedDate} ${j < 10 ? '0' + j : j}:${k < 10 ? '0' + k : k}:${second < 10 ? '0' + second : second}`;
        this.soilData.push(newData)
      }
    },
    // 获取录像链接
    async getVideo() {
      axios.get("http://117.141.22.134:18080/listVideoPath")
        .then(({data}) => {
          let length = data.length
          let video1 = document.getElementById("video1")
          let video2 = document.getElementById("video2")
          video1.src = data[length - 1]
          video2.src = data[length - 2]
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
};
</script>

<style lang="scss" scoped>
$margin: 10px;
.container {
  background: #edeef0;
  overflow: hidden;
}

.index {
  height: calc(100vh - 84px - #{$margin} * 2);
  margin: $margin;
  overflow-y: auto;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background-color: #99a9bf;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 5px;
    background-color: #d3dce6;
  }
}

.main {
  box-sizing: border-box;
  height: calc((100vh - 84px - #{$margin} * 4 - 51px * 3) / 3);
  padding: 10px;
}

.mapMain {
  box-sizing: border-box;
  height: calc(((100vh - 84px - #{$margin} * 4 - 51px * 3) / 3) * 2 + #{$margin} + 51px);
  padding: 5px;
  min-height: calc(180px * 2 + #{$margin} + 51px);
}

.phone {
  height: 729px;
  width: 370px;
  background-image: url("../assets/images/phone.png");
  background-size: cover;
  margin: 0 auto;
}

.phone-container {
  height: 618px;
  width: 343px;
  position: relative;
  top: 46px;
  left: 12px;
  background-color: #fff;
}

.copyRight {
  text-align: center;
  color: #494949;
  padding: 5px 0;
}
.w-svg{
  height:64px;
  width: 64px;
  background-repeat: no-repeat;
  margin-left: 15%;
}
.w-icon{
  height:48px;
  width: 48px;
  background-repeat: no-repeat;
  font-size: 16px;
  margin-left: 5%;
}
.weather-waterDroplet{
  background-image: url('~@/assets/weather/waterDroplet.svg');
}
.weather-soamFanIcon{
  background-image: url('~@/assets/weather/soamFanIcon.svg');
}
.weather-atmosphericPpressure{
  background-image: url('~@/assets/weather/atmosphericPpressure.svg');
}

.monitorMain {
  height: calc((((100vh - 84px - #{$margin} * 4 - 51px * 3) / 3) * 2 + #{$margin} + 75px)/2.3);
}
</style>
